<style lang="scss">
  @import "~@/styles/base";
  .page-double-click {
    .menu-list {
      margin-bottom: rpx(15);
      padding-left: rpx(36);
      padding-right: rpx(36);
      border-radius: rpx(10);
      background-color: #fff;
      .menu {
        position: relative;
        padding-left: rpx(82);
        .icon {
          @include middle-center-y();
          left: 0;
          width: rpx(48);
          height: rpx(48);
        }
        switch {
          @include middle-center-y();
          right: rpx(48);
        }
        .btn-right {
          @include middle-center-y();
          right: rpx(10);
          width: rpx(16);
          height: rpx(28);
        }
        .title {
          height: rpx(105);
          line-height: rpx(105);
          font-size: rpx(28);
          color: $black;
          border-bottom: rpx(1) solid #dbe5f0;
        }
        &:last-child {
          .title {
            border-bottom: none;
          }
        }
      }
    }
  }
</style>
<template>
  <div class="page page-double-click">
    <ul class="menu-list">
      <li class="menu" @click="toMode('mode-pmlight')">
        <img class="icon" mode="widthFix" src="/static/img/mode/tap_pmlight_ic.png">
        <div class="title">夜灯模式</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
      <li class="menu" @click="toMode('mode-exam')">
        <img class="icon" mode="widthFix" src="/static/img/mode/tap_exam_ic.png">
        <div class="title">考试模式</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
      <li class="menu" @click="toMode('mode-manual')">
        <img class="icon" mode="widthFix" src="/static/img/mode/tap_manual_ic.png">
        <div class="title">手工模式</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
      <li class="menu" @click="toMode('mode-custom')">
        <img class="icon" mode="widthFix" src="/static/img/mode/tap_custom_ic.png">
        <div class="title">自定义模式</div>
        <img class="btn-right" mode="widthFix" src="/static/img/common/arrow.png">
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sunrise: true,
        timer: false,
        switchColor: '#5ba0ee'
      }
    },
    components: {},
    methods: {
      toMode(mode){
        wx.navigateTo({
          url: `/sub-pages/light/${mode}/main`
        })
      },
    },
    async onShow() {

    },
  }
</script>
